import {ElSubMenu, ElMenuItem} from 'element-plus'
import type {RouteMeta} from 'vue-router'
import {getAllParentPath, hasOneShowingChild} from '../helper'
import {isUrl} from '@/utils/is'
import {useRenderMenuTitle} from './useRenderMenuTitle'
import {useDesign} from '@/hooks/web/useDesign'
import {pathResolve} from '@/utils/routerHelper'

export const useRenderMenuItem = (
    allRouters: AppRouteRecordRaw[] = [],
    menuMode: 'vertical' | 'horizontal'
) => {
    const renderMenuItem = (routers?: AppRouteRecordRaw[]) => {
        return (routers || allRouters).map((v) => {
            const meta = (v.meta ?? {}) as RouteMeta
            if (!meta.hidden) {
                const {oneShowingChild, onlyOneChild} = hasOneShowingChild(v.children, v)
                const fullPath = isUrl(v.path)
                    ? v.path
                    : getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')

                const {renderMenuTitle} = useRenderMenuTitle()

                if (
                    oneShowingChild &&
                    (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
                    !meta?.alwaysShow
                ) {
                    return (
                        <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
                            {{
                                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
                            }}
                        </ElMenuItem>
                    )
                } else {
                    const {getPrefixCls} = useDesign()

                    const preFixCls = getPrefixCls('menu-popper')
                    return (
                        <ElSubMenu
                            index={fullPath}
                            popperClass={
                                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
                            }
                        >
                            {{
                                title: () => renderMenuTitle(meta),
                                default: () => renderMenuItem(v.children)
                            }}
                        </ElSubMenu>
                    )
                }
            }
        })
    }

    return {
        renderMenuItem
    }
}
